<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	style="background:#f1f1f1 !important">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购买页面</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"></meta>
<link rel="stylesheet"
	href="<%=basePath%>views/upai/layui/css/layui.css" media="all"></link>
<link href="<%=basePath%>views/upai/css/common.css" rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/style.css" rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/idangerous.swiper.css"
	rel="stylesheet"></link>
<link href="<%=basePath%>views/upai/css/team.css" rel="stylesheet"></link>
<style>
p.p_num {
	width: 82px;
	height: 30px;
	border-top: solid 1px #d0d0d0;
	position: relative;
	border-bottom: solid 1px #d0d0d0;
}

span.sy_minus, span.sy_plus {
	width: 24px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	display: block;
	position: absolute;
	top: 0px;
	font-size: 14px;
	border: solid 1px #d0d0d0;
	background: #ebebeb;
	cursor: pointer;
	border-top: none;
	border-bottom: none;
}

span.sy_minus {
	left: 0px;
}

span.sy_plus {
	right: 0px;
}

input.sy_num {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 26px;
}

span.sy_num {
	padding: 5px 8px;
	border: solid 1px #d0d0d0;
	border-left: none;
	border-right: none;
	cursor: pointer;
}
</style>
</head>

<body style="background: #f1f1f1 !important">

	<div class="team">
		<div class="warn">
			<p>
				<img src="<%=basePath%>views/upai/images/shijian_03.png" />请在<span>20分钟</span>内提交订单，时间结束后商品可能被抢完.
			</p>
		</div>
		<div class="">
			<ul class="add_and_subtract" id="cart">
				<c:choose>
					<c:when test="${!empty car}">
						<c:forEach items="${car}" var="carinfo">
							<li style="position: relative" id="goodli${carinfo.id}"><img
								style="position: absolute;" class="zuobianimg"
								src="<%=imagePath%>${carinfo.goods.image}" />
								<div class="youbian-name">
									<p style="font-size: 0.24rem">${carinfo.goods.name}</p>
									<div class="jiajian_sp clearfix" style="padding: 0.24rem 0;">
										<span
											style="font-size: 0.32rem; float: left; display: block; height: 30px; color: #ff0706; line-height: 30px;">¥${carinfo.product.price}</span>
										<!--商品加减-->
										<div class=""
											style="display: inline-block; margin-left: 1rem;">
											<div class="">
												<!-- <p class="" style="display: none">单价:元</p> -->
												<p class="p_num">
													<span class="sy_minus" data_id="${carinfo.id}">-</span> <input
														class="sy_num" id="carnum${carinfo.id}"
														data_price="${carinfo.product.price}" readonly="readonly"
														readonly type="text" value="${carinfo.count}" /> <span
														class="sy_plus" data_id="${carinfo.id}">+</span>
												</p>
												<!-- <p class="" style="display: none">需支付：2800.00元</p> -->
											</div>
										</div>
										<!-----商品加减end-->
										<img src="<%=basePath%>views/upai/images/fchu_03.png"
											class="dw_imgs" onclick="delcar(${carinfo.id})" />
									</div>
								</div></li>
						</c:forEach>
					</c:when>
					<c:otherwise>
						<li class="not_have"><img width="60" height="60"
							src="<%=basePath%>views/upai/images/kgwc_03.png" />
							<p>您的购物车空空如也</p>
							<p>
								<a href="<%=basePath%>mobile/home">去逛逛</a>
							</p></li>
					</c:otherwise>
				</c:choose>
			</ul>
		</div>


	</div>

	<!---------总价结算-->
	<div class="dibujiesuand">
		<a href="javascript:void(0);" onclick="topay()" class="jiesuan fr"
			style="margin: 0 0.24rem">去结算</a> <span class="fr" id="totalPaid">总计
			¥<c:choose>
				<c:when test="${empty sumstr}">0.00</c:when>
				<c:otherwise>${sumstr}</c:otherwise>
			</c:choose>
		</span>
	</div>
	<!---------总价结算end-->

	<!----------悬浮底部------------>
	<div style="height: 1.2rem"></div>
	<jsp:include page="footerNav3.jsp"></jsp:include>

	<script src="<%=basePath%>views/upai/js/jquery-1.9.1.min.js"></script>
	<script src="<%=basePath%>views/upai/js/idangerous.swiper.min.js"></script>
	<script src="<%=basePath%>views/upai/layui/layui.js" charset="utf-8"></script>
	<script src="<%=basePath%>views/upai/js/common.js" charset="utf-8"></script>
	<script type="text/javascript" src="<%=basePath%>views/js/layer.m.js"></script>

	<!---------顶部拖动菜单栏-->
	<script type="text/javascript">
		$(function() {
			var swiper = new Swiper('.swiper-container', {
				slidesPerView : 3.5,
				grabCursor : true,
				spaceBetween : 30
			});

			$(".info_nav ul li").on("click", function() {
				$(this).addClass("on").siblings().removeClass("on")
				$(".content").hide();
				var str = ".content" + (parseInt($(this).index()) + 1);
				$(str).fadeIn();
				swiper.swipeTo($(this).index(), 1000, false);
			})
			$(".content3 .team_more").on(
					"click",
					function() {
						var istrue = $(this).prev("input").attr("checked");
						if (istrue == 'checked') {
							$(this).next(".team_info").children('.team_title')
									.next('p').next('p').hide();
							$(this).prev("input").attr("checked", false);
						} else {
							$(this).next(".team_info").children('.team_title')
									.next('p').show();
							$(this).css("background-images",
									"url(/zjwap/images/retract.png)");
							$(this).prev("input").attr("checked", true);
						}
					});

			var type = 0;
			$(".swiper-wrapper li").eq(type).trigger('click');

		})
	</script>
	<!------商品加减-->
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							var pl = $("p:last");
							var reg = /(.*[\:\：]\s*)([\+\d\.]+)(\s*元)/g;
							$(".sy_minus")
									.click(
											function() {
												var me = $(this), txt = me
														.next(":text"), pc = me
														.closest("p");
												var val = parseFloat(txt.val());
												if(val == 1){
													layer.open({
														title : '提示',
														content : "数量不能为空"
													});
													return false;
												}
												val = val < 1 ? 1 : val;
												txt.val(val - 1);
												var carid = $(this).attr("data_id");
												updatecarinfo(carid,txt.val());
											});

							$(".sy_plus")
									.click(
											function() {
												var me = $(this), txt = me
														.prev(":text"), pc = me
														.closest("p");
												var val = parseFloat(txt.val());
												txt.val(val + 1);
												var carid = $(this).attr("data_id");
												updatecarinfo(carid,txt.val());
											});
						})[0].onselectstart = new Function("return false");
		
		function topay(){
			if($("li[id^='goodli']").length>0){
				window.location.href="<%=basePath%>mobile/confirmCar";
			}else{
				layer.open({
					title : '提示',
					content : "请先选择商品"
				});
				return false;
			}
		}
		
		function updatecarinfo(carid,newnum){
			$.ajax({
				type:"post",
				url:"<%=basePath%>mobile/updateCarGoodNum",
				data:"carId="+carid+"&count="+newnum,
				success:function(msg){
					var info = eval('('+msg+')');
					if(info.error == "0000"){
						updateTotalMoney();
						//更新购物车下标
						updatecargoodcount(info.information);
					}
				}
			})
		}
		
		//减数量
		<%-- function numppt(carid){
			var num = $("#carnum"+carid).val();
			var newnum = parseInt(num)-1;
			if(newnum == 0){//删除该商品，提示
				mui.toast('商品数量不能为0');
				return;
			}else{
				$.ajax({
					type:"post",
					url:"<%=basePath%>mobile/updateCarGoodNum",
					data:"carId="+carid+"&count="+newnum,
					success:function(msg){
						var info = eval('('+msg+')');
						if(info.error == "0000"){
							$("#carnum"+carid).val(newnum);
							updateTotalMoney();
							mui.toast('数量已减少');
						}else{
							mui.toast('操作失败');
						}
					}
				})
			}
		}
		
		//加数量
		function umopt(carid){
			var num = $("#carnum"+carid).val();
			var newnum = parseInt(num)+1;
			$.ajax({
				type:"post",
				url:"<%=basePath%>mobile/updateCarGoodNum",
				data:"carId="+carid+"&count="+newnum,
				success:function(msg){
					var info = eval('('+msg+')');
					if(info.error == "0000"){
						$("#carnum"+carid).val(newnum);
						updateTotalMoney();
						mui.toast('数量已添加');
					}else{
						mui.toast('操作失败');
					}
				}
			})
		} --%>
		
		//更新总价
		function updateTotalMoney(){
			var inputs = $("input[id^='carnum']");
			var sum = 0;
			for(var i = 0;i<inputs.length;i++){
				sum = parseFloat(sum) +parseFloat($(inputs[i]).val() * $(inputs[i]).attr("data_price"));
			}
			$("#totalPaid").html("总计 ¥"+sum.toFixed(2))	;
		}
		
		function delcar(carid){
			if(window.confirm('确定删除该商品？')){
                $.ajax({
					type:"post",
					url:"<%=basePath%>mobile/deleteCar",
					data:"c_ids="+carid,
					success:function(msg){
						var info = eval('('+msg+')');
						if(info.error == "0000"){
							$("#goodli"+carid).remove();
							updateTotalMoney();
							if($("input[id^='carnum']").length==0){
								$("#cart").html("<li class='not_have'><img src='<%=basePath%>views/upai/images/kgwc_03.png' /><p>您的购物车空空如也</p><p><a href='<%=basePath%>mobile/home'>去逛逛</a></p></li>");
							}
							//更新购物车下标
							updatecargoodcount(info.information);
						}
					}
				})
                return true;
             }else{
               // alert("取消");
                return false;
            }
		}
		
		function updatecargoodcount(cargoodcount){
			if( cargoodcount == '0'){
				$("#cargoodcount").remove();
			}else{
				$("#cargoodcount").html(cargoodcount);
			}
		}
	</script>

</body>
</html>
